<template>
  <div>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside class="layout-aside" :style="{
        width: isCollapsed ? '64px' : '200px',
      }">
        <!-- 平台标题 -->
        <div class="aside-title" :class="{ 'is-collapsed': isCollapsed }">
          <span v-if="!isCollapsed">访客管理</span>
        </div>

        <!-- 左侧菜单 -->
        <el-menu router class="menu-list" :default-active="$route.path" :collapse="isCollapsed">
          <el-menu-item index="contacts" :to="'/contacts'">
            <i class="el-icon-s-custom"></i>
            <span v-if="!isCollapsed" slot="title">通讯录管理</span>
          </el-menu-item>
          <el-menu-item index="visit" :to="'/visit'">
            <i class="el-icon-document"></i>
            <span v-if="!isCollapsed" slot="title">访客申请记录</span>
          </el-menu-item>
          <el-menu-item index="statistics" :to="'/statistics'">
            <i class="el-icon-s-data"></i>
            <span v-if="!isCollapsed" slot="title">数据统计</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <!-- 顶部导航 -->
        <el-header class="layout-header">
          <div class="header-left">
            <!-- 折叠按钮 -->
            <el-button @click="toggleCollapse" class="header-collapse-btn">
              <el-tooltip placement="bottom" :content="isCollapsed ? '展开' : '折叠'">
                <i :class="isCollapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
              </el-tooltip>
            </el-button>

            <!-- 面包屑导航 -->
            <el-breadcrumb separator="/">
              <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
                {{ item.meta.breadcrumb }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <!-- 功能菜单 -->
          <div class="header-actions">
            <el-dropdown>
              <i class="el-icon-setting header-settings-icon"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <span @click="handleLogout">退出登录</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>

        <!-- 内容区域 -->
        <el-main class="layout-content">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { userLogout } from '@/api/user';

export default {
  data() {
    return {
      /**
       * 菜单折叠状态
       * @type {Boolean}
       */
      isCollapsed: false,
    };
  },

  computed: {
    /**
     * 面包屑导航列表
     * @returns {Array}
     */
    breadcrumbList() {
      return this.$route.matched;
    },
  },

  methods: {
    /**
     * 切换侧边栏显示状态
     * @returns {void}
     */
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed;
    },

    /**
     * 退出登录
     * @returns {void}
     */
    handleLogout() {
      this.$confirm("您确定要退出吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        try {
          // 调用退出登录接口
          const response = userLogout();
          if (response.success) {
            this.$router.push("/login");
            this.$message.success('退出登录成功');
          } else {
            this.$message.error('退出登录失败');
          }
        } catch (error) {
          this.$message.error(error.message || '退出登录失败');
        }

      });
    },
  },
};
</script>

<style lang="scss">
@import url('@/assets/scss/home.scss');
</style>
